<template>
  <div class="box">
    <header>
      <div class="same">
        <div class="header">
          <i @click="goto"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use></svg></i
          ><span>专科门诊</span><span>&nbsp;</span>
        </div>
      </div>
      <div class="inpts">
        <div class="same">
          <input type="text" placeholder="请输入要搜索的医生名称" />
        </div>
      </div>
      <div class="adress">
        <div class="same"><br /></div>
      </div>
    </header>
    <nav class="same">
      <section
        v-for="item in merit"
        :key="item.merit_id"
        @click="clicks(item.merit_name)"
        :class="{ liang: name == item.merit_name }"
      >
        {{ item.merit_name }}
      </section>
    </nav>
    <div class="content">
      <van-empty
        v-show="doctor_lists.length == 0"
        image="search"
        :style="{ padding: 0, color: '#FFF' }"
      />
      <div class="same">
        <div class="list" v-for="item in doctor_lists" :key="item.doctor_id">
          <router-link :to="'/doctordetail/' + item.doctorId">
            <div class="left">
              <img
                src="https://img0.baidu.com/it/u=224081144,463462312&fm=26&fmt=auto"
                alt=""
              />
            </div>
            <div class="right">
              <p class="title">
                <span class="name">{{ item.doctorName }}</span
                ><span class="rank">{{ item.doctorRank }}</span
                ><span class="time">从业{{ item.doctorTime }}年</span>
              </p>
              <p class="center">
                <span class="address"> {{ item.doctorHospital }} </span
                ><span
                  ><i
                    ><svg class="icon" aria-hidden="true">
                      <use
                        xlink:href="#icon-weizhi"
                        style="color: #ccc"
                      ></use></svg></i
                  >1189.68km</span
                >
              </p>
              <p class="centertwo">
                <span
                  >专长：<span
                    class="titles"
                    v-for="(ites, index) in item.doctor_merit"
                    :key="ites.id"
                    ><span v-show="index != 0">、</span>{{ ites.name }}</span
                  ></span
                >
              </p>
              <p class="btn">
                <router-link :to="'/Register/' + item.hospitalId">
                  <button>预约挂号</button>
                </router-link>
              </p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { doctorlist } from "../../api/doctor";
export default {
  data() {
    return {
      merit: [
        { merit_id: 0, merit_name: "全部" },
        { merit_id: 1, merit_name: "内科" },
        { merit_id: 2, merit_name: "皮肤科" },
        { merit_id: 3, merit_name: "猫科" },
        { merit_id: 4, merit_name: "肿瘤科" },
        { merit_id: 5, merit_name: "心脏科" },
        { merit_id: 6, merit_name: "牙科" },
        { merit_id: 7, merit_name: "眼科" },
        { merit_id: 8, merit_name: "神经科" },
        { merit_id: 9, merit_name: "异宠科" },
        { merit_id: 10, merit_name: "中医授课" },
        { merit_id: 11, merit_name: "外科" },
        { merit_id: 12, merit_name: "骨科" },
        { merit_id: 13, merit_name: "影像科" },
        { merit_id: 14, merit_name: "麻醉科" },
        { merit_id: 15, merit_name: "马科" },
      ],
      name: "全部",
      doctor_list: [],
      doctor_lists: [],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      doctorlist().then((res) => {
        // console.log(res.data.data, "do");
        this.doctor_lists = res.data.data;
        this.doctor_lists = this.doctor_lists.filter((item) =>
          this.name == "全部"
            ? item
            : item.doctor_merit.filter((ite) => ite.name == this.name)[0]
        );
      });

      // this.doctor_lists = this.doctor_list.filter((item) =>
      //   this.name == "全部"
      //     ? item
      //     : item.doctor_merit.filter((ite) => ite.name == this.name)[0]
      // );
    },
    clicks(name) {
      this.name = name;
      this.getlist();
    },
    goto() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: #f1f1f1;
}

header {
  background: #fff;
}
.header {
  font-size: 4.7vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vh;
  i {
    transform: rotate(180deg);
  }
}
.inpts {
  font-size: 4vw;
  input {
    border: 0;
    width: 89vw;
    font-size: 3.5vw;
    padding: 1.5vh;
    border-radius: 2.5vh;
    text-indent: 1.3rem;
    color: rgb(71, 71, 71);
    background: url(../../font/font/select.png) #f1f1f1 no-repeat 2.7vw 2.7vw;
    background-size: 4.3vw;
  }
}
nav {
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  section {
    background: #fff;
    padding: 1vw 2vw;
    border-radius: 4vw;
    margin: 2vw 1vw;
    font-size: 4vw;
  }
}
.liang {
  background: #02ce83;
  color: #fff;
}
.content {
  padding-bottom: 2vh;
  .list a {
    color: #333;
    border-radius: 1.5vw;
    margin-top: 1.5vh;
    background-color: #fff;
    padding: 2vh;
    display: flex;
    .left {
      padding-right: 2vw;
      img {
        width: 14vw;
        height: 8vh;
        border-radius: 50%;
      }
    }
    .right {
      height: 17vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        width: 46vw;
        justify-content: space-between;
        align-items: center;
        display: flex;
        font-size: 4.5vw;
        .rank {
          font-size: 3vw;
          color: rgb(65, 65, 65);
        }
        .time {
          display: inline-block;
          padding: 0.2vw 1vw;
          background-color: rgba(255, 147, 5, 0.192);
          transform: scale(0.9);
          font-size: 2vw;
          color: orange;
        }
      }
      .center {
        font-size: 3.6vw;
        .address {
          padding-right: 6vw;
        }
      }
      .centertwo {
        width: 70vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 3.5vw;
        color: rgb(160, 160, 160);
        .titles {
          color: rgb(94, 94, 94);
        }
      }
      .btn {
        width: 100%;
        display: flex;
        justify-content: end;
        a {
          background-color: #31d192;
          color: #fff;
          font-size: 3.5vw;
          padding: 1.5vw 5vw;
          border-radius: 1.5vw;
          border: 1px solid #239769;
          button {
            border: 0;
            background-color: #31d192;
          }
        }
      }
    }
  }
}
</style>